<!--
 * @Author: your name
 * @Date: 2020-11-25 17:42:46
 * @LastEditTime: 2020-11-26 14:43:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \FenXiaoShangChengAdmind:\工作资料\project_wjh\KunLunAdmin\web\KunLunAdmin\src\components\LcM\search_con\search_date_single\index.vue
-->
<template>
  <div class="date-select-wrap">
    <!-- 年 -->
    <el-date-picker
      v-show="type == 'year' || type == 'season'"
      format="yyyy年"
      v-model="selectDate"
      type="year"
      placeholder="选择年"
      size="small"
      :style="'width:' +(type == 'season' ?  selectWidth - 70 :  selectWidth) + 'px;'"
    >
    </el-date-picker>
    <!-- 月 -->
    <el-date-picker
      v-show="type == 'month'"
      v-model="selectDate"
      format="yyyy年MM月"
      type="month"
      placeholder="选择月"
      size="small"
      :style="'width:' + selectWidth + 'px;'"
    >
    </el-date-picker>
    <!-- 日 -->
    <el-date-picker
      v-show="type == 'date'"
      v-model="selectDate"
      size="small"
      type="date"
      placeholder="选择日期"
      :style="'width:' + selectWidth + 'px;'"
    >
    </el-date-picker>
    <!-- 周 -->
    <el-date-picker
      v-show="type == 'week'"
      v-model="selectDate"
      type="week"
      format="yyyy年 第 WW 周"
      placeholder="选择周"
      align="right"
      :picker-options="pickerOptions"
      size="small"
      :style="'width:' + selectWidth + 'px;'"
    >
    </el-date-picker>
    <el-select 
        size="small"
        v-show="type == 'season'" 
        v-model="selectSeason" 
        placeholder="请选择季度"
        :style="'width:' + (selectWidth -70) + 'px; margin-left: 10px;'">
      <el-option
        v-for="item in seasonOpts"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
//调用

//   <search-date-single
//       lableName="日期"
//       :tThis="this"
//       labelWidth="80px;"
//       dateWidth="150px;"
//       @dateChange="handleDateChange"
//     />

// import search_date_single from "@/components/LcM/search_con/search_date_single";

//     "search-date-single": search_date_single,

export default {
  components: {},
  props: {
    lableName: {
      type: String,
    },
    size: {
      type: String,
    },
    tThis: {
      type: Object,
    },
    labelWidth: {
      type: String,
    },
    selectWidth: {
      type: [String, Number],
      default: 190,
    },
    dateWidth: {
      type: String,
    },
    type: {
      type: [String],
      default: "date",
    },
    //当前日期
    curSelectDate: {
        type: [String, Date]
    },
    //当前季节
    curSelectSeason: {
        type: [String],
    }
  },
  watch: {
    curSelectDate (newVal, oldVal) {
        this.selectDate = this.curSelectDate;
    },
    curSelectSeason (newVal, oldVal) {
        this.selectSeason = this.curSelectSeason;
    },
    selectDate(newVal, oldVal) {
      //格式化
      //   const curDate = new Date(this.selectDate);
      //   console.log(curDate.getDate()); //周的话是，周一的时间段
      //回调
      this.$emit("dateChange", {
        selectDate: this.selectDate,
      });
    },
  },
  mounted() {
    //日期初始化
    if(this.curSelectDate) {
        this.selectDate = this.curSelectDate;
    }
    if(this.curSelectSeason) {
        this.selectSeason = this.curSelectSeason;
    }
    if(!this.curSelectDate) {
        this.selectDate = new Date();
    }

    // if (this.type == "week") {
    //   this.format = "yyyy年 第 WW 周";
    //   this.placeholder = "选择周";
    // } else if (this.type == "year") {
    //   this.format = "yyyy年";
    //   this.placeholder = "选择年份";
    // } else if (this.type == "month") {
    //   this.format = "yyyy-MM";
    //   this.placeholder = "选择月";
    // } else if (this.type == "date") {
    //   this.format = "yyyy-MM-dd";
    //   this.placeholder = "选择日期";
    // }
  },
  data() {
    // 日期限制博客
    // https://blog.csdn.net/qq_28671617/article/details/88792183?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
    return {
      //当前时间变量
      selectDate: "", //时间选择
      //属性
      format: "", //格式化文字
      placeholder: "请选择日期时间", //展示
      //季节选项
      selectSeason: "",
      seasonOpts: [
        { label: "第一季度", value: "1" },
        { label: "第二季度", value: "2" },
        { label: "第三季度", value: "3" },
        { label: "第四季度", value: "4" },
      ],
      //快捷选项
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //data end
    };
  },
  methods: {
      handleClearDate () {
          this.selectDate = "";
          this.selectSeason = "";
          console.log(this.selectDate, tihs.selectSeason);
      }
  },
};
</script>

<style lang="scss" scoped >

.date-select-wrap {
    display:flex;
    flex-direction: row;
}
</style>